<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>整页滚动</title>
		<style>
			body {
				overflow: hidden;
				padding: 0;
				margin: 0;
			}

			.container {
				transition: transform 1s ease-in;
			}

			.page {
				height: 100vh;
				font-size: 80px;
				color: #fff;
				font-weight: 600;
				text-align: center;
				line-height: 100vh;
			}

			.page-1 {
				background: #00ffa1;
			}

			.page-2 {
				background: #bcf1ae;
			}

			.page-3 {
				background: #dab573;
			}

			.page-4 {
				background: #c3d86d;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="page page-1">1</div>
			<div class="page page-2">2</div>
			<div class="page page-3">3</div>
			<div class="page page-4">4</div>
		</div>

		<script>
			const container = document.querySelector('.container'); // container of pages
			const pageH = window.innerHeight; // height of one page
			const pageCount = document.querySelectorAll('.page').length;

			const onePageScrollHandler = throttle(onePageScroll, 100);
			window.addEventListener('mousewheel', onePageScrollHandler);

			function onePageScroll(evt) {
				const height = window.innerHeight;
				const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
				if (scrollTop % height !== 0) return;
				if (evt.deltaY > 0) {
					// 下滚
					window.scrollTo({
						left: 0,
						top: scrollTop + height,
						behavior: 'smooth', // 平滑滚动
					});
				} else {
					// 上滚
					window.scrollTo({
						left: 0,
						top: scrollTop - height,
						behavior: 'smooth', // 平滑滚动
					});
				}
			}

			function throttle(fn, delay) {
				// 函数节流：防止频繁触发
				let oldTime = +new Date();
				let that = this;
				return function () {
					let nowTIme = +new Date();
					if (new Date() - oldTime >= delay) {
						fn.apply(that, arguments);
						oldTime = nowTIme;
					}
				};
			}
		</script>
	</body>
</html>
